<template>
  <page-layout>
    <template #title>
      <div class="layout-flex">
        <div class="layout-inline">
          <el-select v-model="queryObj.siteId" placeholder="全部水库" filterable multiple collapse-tags>
            <el-option v-for="item in siteIdOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="layout-inline">
          <el-date-picker
            type="daterange"
            v-model="dateSection"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
          >
          </el-date-picker>
        </div>
      </div>
    </template>
    <card-panel>
      <el-table-block2
        :column="column"
        :data="rows"
        :pagination="true"
        :currentPage="pagination.pageNo"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        layout="prev, pager, slot, jumper, next"
        @currentChange="handleCurrentChange"
      />
    </card-panel>
  </page-layout>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      queryObj: {
        siteId: ''
      },
      siteIdOptions: [],
      pagination: {
        pageNo: 1,
        pageSize: 5,
        total: 200
      },
      column: [
        { label: '水库名称', prop: '水库名称', align: 'center' },
        {
          label: '雨量监测站点名称',
          prop: '雨量监测站点名称',
          align: 'center'
        },
        { label: '雨量(mm)', prop: '雨量(mm)', align: 'center' },
        { label: '水位(cm)', prop: '水位(cm)', align: 'center' },
        { label: '数据更新时间', prop: '数据更新时间', align: 'center' }
      ],
      rows: Array.from({ length: 5 }, () => ({
        水库名称: '2020-05-02',
        雨量监测站点名称: '韩小寒',
        '雨量(mm)': '陕西省西安市高新区汇鑫IBC'
      }))
    }
  }
}
</script>

<style scoped></style>
